<template>
  <div style="height: 100%; margin-top: 10px; border-right: 1px solid #dadada">
    <div style="display: flex; justify-content: space-between; margin: 0 10px 10px; font-weight: bolder">
      <div>权限分组</div>
      <div style="margin-right: 10px; cursor: pointer" @click="cliAdd"><PlusCircleOutlined /></div>
    </div>
    <div style="margin: 0 10px">
      <a-input-search v-model:value="searchInput" @search="onSearch"></a-input-search>
    </div>
    <div
      v-for="(item, idx) in group"
      :key="idx"
      :class="{ 'group-item': 1, 'first-item': idx === 0, 'group-select': selected === idx }"
      @click="selectGroup(item, idx)"
    >
      <div v-if="idx" class="it-icon">
        <EditOutlined style="margin-right: 10px" @click="editFun.cliEdit(item)" />
        <DeleteOutlined @click="deleteFun.cliDelete(item)" />
      </div>
      <span>{{ item.name }}</span>
      <br />
      <span v-if="idx !== 0">{{ item.key }}</span>
    </div>
    <addGroup v-if="isShowAdd" ref="myaddgroup" @add-close="addClose" @create-success="createSuccess"></addGroup>
    <!--删除弹框    -->
    <a-modal v-model:visible="deleteFun.isDelete" title="删除" @ok="deleteFun.deleteOk">
      {{ `确认删除 ${deleteFun.curItem.name} 吗 ?` }}
    </a-modal>
  </div>
</template>

<script setup>
import { ref, reactive, nextTick, defineEmits, defineExpose } from 'vue'
import { EditOutlined, DeleteOutlined, PlusCircleOutlined } from '@ant-design/icons-vue'
import factory from '../../factory.js'
import addGroup from '@/views/permission-manag/components/leftgroup/beAddGroup'
// import detail from './detail'

const group = ref([
  { name: '全部', key: '' },
  // { name: '管理员权限组', key: 'ADMIN_GROUP' },
  // { name: '门店权限组', key: 'STORY_GROUP' },
])
const getPermisGroup = (search = '') => {
  if (search === '') {
    group.value = [{ name: '全部', key: '' }]
  } else {
    group.value = []
  }
  factory.getPermisGroup({ search }).then((res) => {
    res.data.forEach((item) => {
      group.value.push(item)
    })
  })
}
getPermisGroup()
defineExpose({ getPermisGroup })

//==选择分组======================
const selected = ref(0)
const emit = defineEmits(['select-group', 'cliEdit'])
const selectGroup = (item, idx) => {
  selected.value = idx
  emit('select-group', item)
}

//==搜索分组=====================
const searchInput = ref('')
const onSearch = (val) => {
  getPermisGroup(val)
}

//==新增===================================
const isShowAdd = ref(false)
const myaddgroup = ref(null)
const cliAdd = () => {
  isShowAdd.value = true
  nextTick(() => {
    myaddgroup.value.visible = true
  })
}
const addClose = () => {
  isShowAdd.value = false
}
const createSuccess = () => {
  getPermisGroup(searchInput.value)
}

//==编辑===========================================
const editFun = reactive({
  isShowDetail: false,
  cliEdit: (item) => {
    event.stopPropagation()
    editFun.isShowDetail = true
    currentItem.value = item
    emit('cliEdit', item)
  },
  updateSuccess: () => {
    editFun.isShowDetail = false
    getPermisGroup()
  },
  close: () => {
    editFun.isShowDetail = false
  },
})
//==子组件依赖注入=========
const currentItem = ref({})
// provide('roleParams', {
//   currentItemId: currentItem
// })

//==删除==============================================
const deleteFun = reactive({
  isDelete: false,
  curItem: {},
  cliDelete: (item) => {
    event.stopPropagation()
    deleteFun.isDelete = true
    deleteFun.curItem = item
  },
  deleteOk: () => {
    factory.delPermisGroup({ key: deleteFun.curItem.key }).then((res) => {
      deleteFun.isDelete = false
      getPermisGroup()
    })
  },
})
</script>

<style scoped lang="less">
.group-item {
  position: relative;
  height: 60px;
  margin: 5px 10px;
  padding: 5px 10px;
  border: 1px solid #dadada;
  border-radius: 5px;
  cursor: pointer;

  .it-icon {
    position: absolute;
    right: 1px;
    display: none;
  }
}

.group-item:hover {
  div {
    display: initial;
  }
}

.first-item {
  display: flex;
  align-items: center;
  height: 40px;
}

.group-select {
  border: 2px solid dodgerblue;
}
</style>
